<template>
  <div>
    <h2>购物车列表：购物车</h2>
    <ul>
      <li class="product" v-for="item in cartList" :key="'product-'+item.id">
        <span class="product-title">{{ item.title }} X {{ item.number }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CartModule } from '@/store/modules/cart'

@Component({
  name: 'CartList',
})
export default class extends Vue {
  get cartList() {
    return CartModule.cartList
  }
}
</script>

<style lang="scss">
.product {
  .product-title {
    margin-right: 10px;
  }
}
</style>
